<template>
    <div style="padding:20px;">
        <!--业务流程-->
        <template v-if="businessObj.isEditor">
            <el-row>
                <el-col :span="17">
                    <div class="business-tab-nav">
                        <ul>
                            <li v-for="(item,index) in navData" :key="index" :class="focusIndex==index?'active':''" @click="changeNav(item)">
                                {{item}}
                            </li>
                        </ul>
                    </div>
                    <div class="business-des">
                        <h2>{{title}}</h2>
                        <img :src="picUrl" alt="" v-if="picUrl!=''">
                    </div>
                </el-col>
                <el-col :span="6" :offset="1">
                    <div style="background-color:#DFE8F6;padding:3px 10px;margin-bottom:10px;border-radius:3px;">
                        <el-button type="primary" size="mini">刷新</el-button>
                    </div>
                    <el-form label-width="85px">
                        <el-form-item label="业务流程">
                            <el-select v-model="businessType" placeholder="请选择业务流程类型">
                                <el-option
                                v-for="item in select.businessType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择图片">
                            <el-upload
                                class="upload-demo"
                                :action="action"
                                :with-credentials="true"
                                :on-success="handleSuccess"
                                :accept="accept"
                                :limit="1"
                                :show-file-list="false">
                            <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip" style="line-height:20px;">要求上传图片文件，支持格式：gif，jpg，jpeg，png。</div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    
                    
                </el-col>
            </el-row>
        </template>
        <template v-else>
            <div class="business-tab-nav">
                <ul>
                    <li v-for="(item,index) in navData" :key="index" :class="focusIndex==index?'active':''" @click="changeNav(item)">
                        {{item}}
                    </li>
                </ul>
            </div>
            <div class="business-des">
                <h2>{{title}}</h2>
                <img :src="picUrl" alt="" v-if="picUrl!=''">
            </div>
        </template>
        
        
    </div>
</template>
<script>
import api from '@/ajax/api-sl';
export default {
    data(){
        return {
            action: api.upload,
            picUrl: '',
            accept:'image/*',
            title:'企业路查流程',
            src:'http://113.140.71.251:8009/FlowCharts/%E4%BC%81%E4%B8%9A%E8%B7%AF%E6%9F%A5%E6%B5%81%E7%A8%8B%E5%9B%BE.PNG',
            focusIndex:0,
            navData: ['企业路查流程', '投诉处理流程', '车辆更新流程', '其他流程'],
            navPicUrl: {},
            // navData:[
            //     {name:'企业路查流程',src:'http://113.140.71.251:8009/FlowCharts/%E4%BC%81%E4%B8%9A%E8%B7%AF%E6%9F%A5%E6%B5%81%E7%A8%8B%E5%9B%BE.PNG'},
            //     {name:'投诉处理流程',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569233465554&di=59615dafc8b83828a84b56a829852bf5&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D316355404%2C457881167%26fm%3D214%26gp%3D0.jpg'},
            //     {name:'投诉处理流程',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569233517561&di=cb0834c42de3985576c06aa033e05181&imgtype=0&src=http%3A%2F%2Fwww.tongda2000.com%2Foa%2Ffeedback%2Ffeed5%2Fcomment%2Fimages%2F37%2F3.png'},
            //     {name:'车辆更新流程',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569233542781&di=8fcac37e2efaebc7d186b95b2f9473f5&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D981598242%2C1347244953%26fm%3D214%26gp%3D0.jpg'}
            // ],
            select:{
                businessType:[
                    {label:'企业路查流程',value:'企业路查流程'},
                    {label:'投诉处理流程',value:'投诉处理流程'},
                    {label:'车辆更新流程',value:'车辆更新流程'},
                    {label:'其他流程',value:'其他流程'}
                ]
            },
            businessType:'企业路查流程'
        }
    },
    props:['businessObj'],
    mounted(){
        this.reload()
    },
    computed:{
        
    },
    methods:{
        changeNav:function (name){
            this.title = name
            this.focusIndex = this.navData.indexOf(name);

            if (!this.navPicUrl.hasOwnProperty(name)) {
                this.reload()
            } else {
                this.picUrl = this.navPicUrl[name]
            }
        },

        handleSuccess(res, file, fileList) {
            if (res.code === '00000') {
                this.saveFlowChat(res.data.fileName);
                this.picUrl = api.imgHost + res.data.fileName;
            }
        },
        async reload () {
            const res = await api.getBasicFlowChat({flowChatId: this.title});
            if (res.code === '00000') {
                if(res.data) {
                    this.picUrl = api.imgHost + res.data.picUrl;
                } else {
                    this.picUrl = ''
                }
                this.navPicUrl[this.title] = this.picUrl
            } else {
                this.$message.error(res.message);
            }
        },
        async saveFlowChat(picUrl){
            const res = await api.editBasicFlowChat({flowChatId: this.businessType, picUrl: picUrl})
            if (res.code === '00000') {
                this.$message.success('提交保存成功')
          } else {
                this.$message.error(res.message);
          }
        }
    }
}
</script>
<style lang="scss">
$BorderColor:#99bbe8;
$Color:#15428F;
.business-tab-nav{
    padding: 10px;height: 30px;
    li{float: left;padding:0 10px;line-height: 30px;font-size: 16px;list-style: none;color: $Color;cursor: pointer;
    &.active,&:hover{font-weight: bold;}
    }
}
.business-des{
    border: 1px solid $BorderColor;
    padding: 20px;
    border-radius: 3px;
    h2{color:$Color;font-size: 16px;font-weight: bold;line-height: 30px; }
    img{max-width: 100%;}
}
</style>